<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>邮件查看</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <base href="http://localhost:8888"/>
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/weadmin.css">
    <style>
        .h2-page {
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>

<body>
<div class="weadmin-body">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>内部邮箱</legend>
    </fieldset>
    <div class="layui-collapse" lay-filter="list">
        <form class="layui-form" action="" style="margin-top: 10px">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">邮件类型：</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <select name="type" lay-verify="">
                            <option value="">全部</option>
                            <option value="工作">工作</option>
                            <option value="闲聊">闲聊</option>
                            <option value="建议">建议</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>
                    <label class="layui-form-label" th:if="${type} == 'accept'">是否匿名：</label>
                    <div class="layui-input-inline" style="width: 150px;" th:if="${type} == 'accept'">
                        <select name="anonymous" lay-verify="">
                            <option value="">全部</option>
                            <option value="1">匿名</option>
                            <option value="0">公开</option>
                        </select>
                    </div>
                    <button class="layui-btn" lay-submit="" lay-filter="search_accept" th:if="${type} == 'accept'">搜索</button>
                    <button class="layui-btn" lay-submit="" lay-filter="search_send" th:if="${type} == 'send'">搜索</button>
                </div>
            </div>
        </form>

        <div th:if="${list == null || list.size() == 0}">
            <h2 style="color: red;">暂时没有邮件~</h2>
        </div>
        <div class="layui-colla-item" th:each="item : ${list}">
            <h2 class="layui-colla-title h2-page">
                <span style="font-weight: bold">邮件标题：《[[${item.mailTitle}]]》</span>
                <span>邮件类型：[[${item.mailType}]]</span>
                <span>发件人：[[${item.sendUsername}]]</span>
                <span style="color: darkred">收件时间：[[${item.gmtUpdate}]]</span>
            </h2>
            <div class="layui-colla-content">
                <p>邮件正文：</p>
                <p th:text="${item.content}"></p>
            </div>
        </div>
    </div>
</div>
<script src="lib/layui/layui.js" type="text/javascript"></script>
<script>
    layui.use(['element', 'layer', 'form'], function () {
        var element = layui.element,
            form = layui.form;

        //监听折叠
        element.on('collapse(list)', function (data) {
        });

        //监听提交
        form.on('submit(search_accept)', function (data) {
            location.href = "http://localhost:8888/member/life/mailBox/get?type=" + data.field.type + "&anonymous=" + data.field.anonymous;
            return false;
        });

        form.on('submit(search_send)', function (data) {
            location.href = "http://localhost:8888/member/life/mailBox/get/send?type=" + data.field.type;
            return false;
        });
    });
</script>
</body>

</html>